<template>
  <div v-if="loading" class="spin-wrap">
    <a-spin size="large" tip="努力的加载中..."></a-spin>
  </div>
  <a-layout v-else style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <base-menu></base-menu>
    </a-layout-sider>
    <a-layout class="main">
      <a-layout-header style="background: #fff; padding: 0; height: 40px; line-height: 40px" >
        <base-header></base-header>
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <div class="base-content">
          <base-breadcrumb></base-breadcrumb>
          <div class="content-wrap">
            <base-content></base-content>
          </div>
        </div>
      </a-layout-content>
      <a-layout-footer class="footer" style="text-align: center">
        ©2023 Created by 一颗松鼠🐿️
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import {Ref, ref, onMounted} from 'vue';
import menuListStore from "../stores/menuListStore.ts";
import baseMenu from '../components/menu/baseMenu.vue'
import baseHeader from '../components/baseHeader.vue'
import baseBreadcrumb from '../components/baseBreadcrumb.vue'
import baseContent from '../components/baseContent.vue'
import {get} from '../axios/axiosFunction.ts'
import {getArticle} from "../api/example.ts";

const collapsed = ref<boolean>(false);
const loading = ref(true)

const menuList:Ref = ref([
  { path:'/community', name:'社区管理', icon:'ApartmentOutlined',children:[]},
  { path:'/userManagement', name:'用户管理', icon:'UserOutlined',children:[
      {path: 'user', name: '用户信息列表', icon: 'BarChartOutlined'},
      {path: 'hobby', name: '用户爱好列表', icon: 'HeartOutlined'},
    ]},
  { path:'/meeting', name:'会车管理', icon:'StarOutlined',children:[]},
])
const menuStore = menuListStore()
onMounted(async ()=>{
  menuStore.updateList(menuList.value,()=>{
    loading.value = false
  })
  try {
    // 直接使用接口
    const response = await get('/posts/2');
    console.log(response);
  } catch (error) {
    console.error(error);
  }

  try {
    // 通过封装业务接口使用
    const response = await getArticle(3)
    console.log(response);
  } catch (error) {
    console.error(error);
  }
})

</script>
<style scoped lang="scss">
.main{
  height: 100vh;
}
.footer{
  padding: 12px 25px;
}
.spin-wrap{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.base-content{
  display: flex;
  flex-direction: column;
  height: 100%;
  .content-wrap{
    padding: 16px;
    background: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
}
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>
